// 记录屏幕枚举
$breakpoints: (
  'phone': (320px, 480px),
  'pad': (481px, 768px),
  'notebook': (769px, 1024px),
  'desktop': (1025px, 1200px),
  'tv': 1201px
);

// 混合方法 -- 响应式媒体查询
@mixin respond-to($breakname) {
  // 获取枚举数据
  $bp: map-get($breakpoints, $breakname);
  // 判断枚举数据类型
  @if type-of($bp) == 'list' {
    // 取值
    $min: nth($bp, 1);
    $max: nth($bp, 2);
    // 枚举查询
    @media (min-width: $min) and (max-width: $max) {
      // 传入的样式
      @content;
    }
  } @else {
    @media (min-width: $bp) {
      @content;
    }
  }
}

// 使用 -- 注意：$breakname 必须在 $breakpoints 中定义

.demo {
  width: 60px;
  height: 60px;
  margin: 40px auto;
  background-color: #09adef;
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;

  @include respond-to('pad') {
    width: 120px;
  }
  @include respond-to('notebook') {
    width: 240px;
  }
  @include respond-to('desktop') {
    width: 480px;
  }
  @include respond-to('tv') {
    width: 960px;
  }
}